
/*
 * @Author: Wilbur
 * @Date: 2018-11-17 16:37:43
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-04-15 10:11:13
 * 排期
 */
<template>
    <div class="container schedule-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20"
            >
                <el-form
                    label-position="center"
                    label-width="84px"
                    ref="searchfrom"
                    size="small">
                    <el-form-item label="排期状态">
                        <el-select
                            v-model="filterData.schedule_status"
                            filterable
                            @change="fnGetShopList(filterData.type_no)"
                            placeholder="请选择"
                        >
                            <el-option
                                label="不限"
                                value=""/>
                            <el-option
                                label="未排期"
                                :value="1"/>
                            <el-option
                                label="已排期"
                                :value="2"/>
                        </el-select>
                    </el-form-item>

                    <el-form-item
                        label="未排期筛选"
                        style="margin-left: 30px;">
                        <el-date-picker
                            v-model="filterData.schedule_date_range"
                            type="daterange"
                            @change="fnChangeRangeTime(filterData.type_no)"
                            value-format="yyyy-MM-dd"
                            format="yyyy 年 MM 月 dd 日"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"/>
                    </el-form-item>
                    <!-- <el-button
                        size="small"
                        style="margin-left: 18px;"
                        @click="fnResetFrom('searchfrom')"
                    >重置筛选</el-button> -->
                    <el-button
                        size="small"
                        type="primary"
                        style="margin-left: 18px;"
                        @click="fnGetShopList(filterData.type_no)"
                    >搜索</el-button>
                </el-form>
            </el-row>
            <el-tabs
                v-model="activeName"
                @tab-click="handleClick"
            >
                <el-tab-pane
                    :label="resoureType.type_name"
                    :name="resoureType.type_no"
                    v-for="(resoureType, index) in resourceTypeList"
                    :key="index"
                />
            </el-tabs>
            <div class="cart-item-wrap">
                <cart-item
                    :list="shopList"
                    :rate="rate"
                    :type="activeName"
                    @update="fnGetShopList(filterData.type_no)"
                    @clear="fnClearShopList"
                    @reload="fnReload"
                />
            </div>
        </div>
    </div>
</template>

<script>
import cartItem from '@/components/bid/cart-item';
export default {
    components: {
        cartItem
    },
    data() {
        return {
            authResult: {},
            tableData: [],
            filterData: {
                schedule_date_range: [],
                schedule_status: '1',
                type_no: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket'),
            checked: false,
            showDialogDateTime: false,
            activeName: '0',
            //头条购物车列表
            shopList: [],
            rate: 0,
            loading: false,
            resourceTypeList: [],
            lastQueryTime: 0,
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '资源排期'
            }
        ]);
        this.filterData.schedule_status = this.$route.query.schedule_status ? eval(this.$route.query.schedule_status) : 1;
        this.filterData.schedule_date_range = this.$route.query.schedule_date_range ? this.$route.query.schedule_date_range : [];

        this.fnGetResourceType();
        this.fnGetShopList();
    },
    mounted() {
    },
    methods: {
        fnReload(){
            this.fnGetResourceType();
            this.fnGetShopList(this.filterData.type_no);
        },
        handleClick(tab, event) {
            this.filterData.type_no = tab.name;
            this.fnGetShopList(tab.name);
        },
        fnGetResourceType() {

            this.$post('/wei4/resource_schedule%5Cget_type_list', {
                contract_no: this.$route.query.contract_no
            }, resp => {
                if (resp.code == 1) {
                    this.resourceTypeList = [{
                        type_no: '0',
                        type_name: '全部'
                    }].concat(resp.data.list);
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnChangeRangeTime(type_no) {
            this.fnGetShopList(type_no);
        },
        fnGetShopList(avtive) {
            let timeRange = '';

            this.filterData.type_no = avtive;

            if(this.filterData.schedule_date_range == null) {
                this.filterData.schedule_date_range = [];
            }

            if(this.filterData.schedule_date_range.length != 0) {
                timeRange = this.filterData.schedule_date_range[0] + ':' + this.filterData.schedule_date_range[1];
            }
            this.$router.replace({
                query: {
                    type_no: this.filterData.type_no,
                    schedule_status: this.filterData.schedule_status,
                    schedule_date_range: this.filterData.schedule_date_range,
                    contract_no: this.$route.query.contract_no
                }
            });

            let currTime = new Date().getTime();

            this.lastQueryTime = currTime;
            this.loading = true;

            this.$post('/wei4/resource_schedule%5Cget_list', {
                type_no: this.filterData.type_no,
                schedule_status: this.filterData.schedule_status,
                schedule_date_range: timeRange,
                contract_no: this.$route.query.contract_no
            }, resp => {
                if (this.lastQueryTime != currTime) {
                    return;
                }
                this.loading = false;
                if (resp.code == 1) {
                    this.shopList = resp.data.list;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
            // this.$post('/Cart/lists', { type_no: avtive },resp => {
            //     if (this.lastQueryTime != currTime) {
            //         return;
            //     }
            //     this.loading = false;
            //     if (resp.code == 1) {
            //         this.shopList = resp.data.list;
            //         this.rate = resp.data.stat.fee_rate;
            //         this.$store.commit('car/GET_SHOP_LIST', false);
            //     } else {
            //         this.$notify({
            //             title: '警告',
            //             message: resp.msg,
            //             duration: 2000,
            //             type: 'warning'
            //         });
            //     }
            // });
        },
        fnClearShopList() {
            this.shopList = [];
        },
        fnClearSelectedShopList() {
            this.shopListMenu = [];
        },

        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/wei4/base%5Cbanner%5Cget_list', {
                page_id: page || this.page.now_page
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}

</style>
<style lang="less">
.shop-car-wrap {
    .hr-part {
      margin-left: 10px;
      margin-right: 10px;
    }
    .cart-item-wrap {
      margin-bottom: 120px;
    }
  }
.schedule-container{
    .el-tabs{
        background: #fff;
        .el-tabs__nav-wrap::after{
            height: 1px;
        }
        .el-tabs__nav{
            margin-left: 15px;
        }
    }
    .search-wrapper{
        border: 1px solid #fff;
        margin-bottom: 15px;
        .el-form-item{
            display: inline-block;
            margin-bottom: 0;
        }
    }
}
</style>
